<template>
  <view class="content">
    <view v-if="userInfo" class="userInfo-box">
      <u-avatar :src="userInfo.avatar_url" :size="150"></u-avatar>
      <view class="loginname">{{ userInfo.loginname }}</view>
      <view>
        <view
          class="user-item"
          v-for="(item, index) in userItem"
          :key="index"
          @click="clickFn(item)"
        >
          <text>{{ item.name }}</text>
          <u-icon :name="item.icon" color="#333" size="40"></u-icon>
        </view>
      </view>
    </view>
    <NoLogin v-else />
    <TabBar />
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import TabBar from "@/components/TabBar";
import NoLogin from "@/components/noLogin";
export default {
  components: {
    TabBar,
    NoLogin,
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  data() {
    return {
      title: "Hello",
      userItem: [
        {
          name: "我的收藏",
          icon: "star-fill",
          url: "/pages/user/collection",
        },
        {
          name: "我的回复",
          icon: "chat-fill",
          url: "/pages/user/reply",
        },
        {
          name: "我的贴子",
          icon: "order",
          url: "/pages/user/Posts",
        },
        {
          name: "退出登录",
          icon: "person-delete-fill",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    ...mapActions("user", ["userInfo_action"]),
    clickFn(item) {
      if (item.url) {
        uni.navigateTo({ url: item.url });
      } else {
        this.userInfo_action(null);
        uni.showToast({
          icon: "success",
          title: "退出成功",
          duration: 2000,
          success: () => {
            setTimeout(() => {
              uni.switchTab({ url: "/" });
            }, 2000);
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.userInfo-box {
  text-align: center;
  padding: 15% 40rpx 0;
  .loginname {
    margin: 40rpx 0;
    font-size: 40rpx;
    font-weight: 700;
  }
  .user-item {
    padding: 30rpx;
    border-bottom: 1px solid #ccc;
    font-size: 30rpx;
    display: flex;
    justify-content: space-between;
  }
}
</style>
